<template>
  <div class="sale-rank app-container">
    <div class="data-outline">
      <div class="title-area">
        <div class="title">全国城市销量排行</div>
      </div>
      <el-table :data="changeDataSort" height="600">
        <el-table-column prop="name" label="排名" width="100">
          <template slot-scope="scope">
            <span :class="{ 'td-top': scope.$index < 3, 'td-nontop': scope.$index >= 3 }">{{
                    scope.$index+1
                  }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cityName" label="城市" width="100">
        </el-table-column>
        <el-table-column prop="sales" label="数量" width="120">
        </el-table-column>
      </el-table>
    </div>
    <city-distribute-map v-if="changeData.length>0" ref="cityMap" :changeData1="changeData"></city-distribute-map>
  </div>
</template>
<script>
  import cityDistributeMap from '@/components/echarts/cityDistributeMap'

  import {
    getSales
  } from "@/api/business/orderinfo"
  export default {
    components: {
      "city-distribute-map": cityDistributeMap
    },
    data() {
      return {
        changeDataSort:[],
        changeData: [],
        option: null,
      }
    },
    created() {
    },
    mounted() {
      this.hotRegionMap();
    },
    mounted() {
      getSales().then(res=>{
          this.changeData = res.data
          this.changeDataSort = this.sortBykey(res.data)
          this.$nextTick(() => {
            this.$refs.cityMap.initChart()
          });
      })
        // this.changeDataSort = this.sortBykey(this.changeData)
      // setTimeout(() => {
      //     this.$refs.RefXMultibar.setOption(this.buildOption('2023-05-20', '2023-06-20'))
      // }, 2000);
    },
    methods: {
      sortBykey(ary) {
       	return ary.sort(function (a, b) {
          	let y = a.sales
          	let x = b.sales
          	return ((x < y) ? -1 : (x > y) ? 1 : 0)
        	})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .td-top {
    order-radius: 2px;
    width: 20px;
    height: 20px;
    background-color: red;
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: white;
  }

  .td-nontop {
    width: 20px;
    height: 20px;
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: black;
  }

  .sale-rank {
    min-height: 840px ;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .data-outline {
      background-color: white;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      .title-area {
        display: flex;
        flex-direction: row;
        .title {
          font-family: "PingFang SC";
          font-size: 14px;
          font-weight: 500;
          /* 'Medium' in font-weight is equivalent to 400 */
          line-height: 20px;
          color: black;
        }
      }

      // .waiting-delieve-num-item,
      // .inventory-warning-item,
      // .activity-will-expire-item
      .pay-waiting-deliver-num-item,
      .scan-waiting-deliver-num-item,
      .lottery-waiting-deliver-num-item,
      .integral-waiting-deliver-num-item {
        position: relative;
        .img {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 30px;
        }

        padding: 13px 20px 9px 13px;
        .num {
          position: absolute;
          top: -5px;
          left: 40px;
          font-family: "PingFang SC";
          font-size: 14px;
          font-weight: 500;
          line-height: 22px;
          color: #333;
          width: 200px;
        }

        .desc {
          position: absolute;
          top: 11px;
          left: 40px;
          font-weight: 400;
          font-family: "PingFang SC";
          font-size: 12px;
          line-height: 30px;
          color: #989DAA;
          width: 200px;

        }
      }
    }
  }
</style>
